<template>
  <div class="InfinityContainer">
    <el-skeleton v-show="skeletonVisible" />
    <div
      v-show="!skeletonVisible"
      v-for="(item, index) in blogList"
      :key="'blog' + index + Math.random()"
    >
      <DataDetail :blogInfo="item" />
    </div>
  </div>
</template>

<script>
import DataDetail from "../DataDetail/index.vue";
import axios from "axios";
export default {
  components: {
    DataDetail,
  },
  data() {
    return {
      loading: false,
      blogList: [],
      skeletonVisible: true,
    };
  },
  methods: {
    loadMore() {
      if (this.loading) return;
      this.loading = true;
      axios("./data.json").then((res) => {
        this.blogList = this.blogList.concat(res.data);
        this.skeletonVisible = false;
      });
      this.loading = false;
    },
    handleScroll() {
      // scrollHeight  =>  当前文档高度
      const scrollHeight = document.body.scrollHeight;
      // scrollTop  =>  当前已滚动距离
      const scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      // 获取浏览器视窗高度
      const clientHeight = document.documentElement.clientHeight;
      // 距离底部的高度
      const distance = scrollHeight - scrollTop - clientHeight;
      if (distance <= 400) {
        this.loadMore();
      }
    },
  },
  mounted() {
    this.loadMore();
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style>
.InfinityContainer {
  overflow: auto !important;
}
</style>